<template>
	<view>
		<!-- 橙色部分 -->
		<view class="situation"></view>
		<!-- 信息卡片 -->
		<form class="contain" @submit="submit">
			<view style="width: 100%;text-align: center;">
				<image mode="heightFix" class="posters" :src="imageUrl"></image>
			</view>
			<view class="title">{{name}}</view>
			<view class="teacher">授课老师：叶耀明</view>
			<view class="evaluation">课程评价</view>
			<view class="teacher">轻点评分并撰写内容</view>
			<view class="course_level">
				<image v-for="(item, index) in level" :key="index" mode="heightFix" src="https://img-blog.csdnimg.cn/20210316154410292.png" @click="changeLevel(index)"></image>
				<image v-for="(item, index) in (5-level)" mode="heightFix" src="../../static/credits.png" @click="changeLevel(level+index)"></image>
			</view>
			<view style="width: 100%;display: flex;justify-content: center;">
				<textarea name="content" placeholder="请输入评价"></textarea>
			</view>
			<button class="commitBtn" form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				name: '',
				level: 0
			}
		},
		onLoad(item) {
			if(item.imageUrl) {
				cloudbase.getTempFileURL({
					fileList: [item.imageUrl]
				}).then(res => {
					let list = res.fileList[0];
					this.imageUrl = list.tempFileURL ? list.tempFileURL : item.imageUrl;
				})
				this.name = item.name; 
			}
		},
		methods: {
			submit: function(e){
				// 获取评分等级
				let level = this.level;
				// 获取评价内容
				let content = e.detail.value.content;
				console.log(content);
				uni.navigateTo({
					url: '../commitSuccess/commitSuccess'
				})
			},
			changeLevel: function(index){
				// console.log(index+1)
				this.level = index+1;
			}
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.situation {
		background-color: #FD973F;
		width: 100%;
		height: 320rpx;
		border-radius: 0 0 50% 50%;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.contain{
		margin: -250rpx 30rpx;
		/* height: 300rpx; */
		/* background-color: #fff; */
		border-radius: 24rpx;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.posters{
		height: 400rpx;
		border-radius: 16rpx;
	}
	.title{
		margin: 10rpx 0rpx;
		font-size: 40rpx;
		font-weight: bold;
		/* line-height: 80rpx; */
	}
	.teacher{
		font-size: 30rpx;
		color: #777;
	}
	.evaluation{
		color: #777;
		font-size: 35rpx;
		margin-top: 40rpx;
		line-height: 80rpx;
	}
	.contain textarea{
		/* border: solid 1rpx #aaa; */
		background-color: #fff;
		border-radius: 34rpx;
		box-shadow: 0rpx 5rpx 35rpx 1rpx #bbb;
		margin: 40rpx 20rpx;
		padding: 30rpx;
		height: 200rpx;
		text-align: start;
		font-size: 30rpx;
	}
	.commitBtn{
		background-color: #FD973F;
		color: #fff;
		border-radius: 24rpx;
		width: 180rpx;
		font-size: 34rpx;
	}
	.course_level{
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}
	.course_level image{
		height: 50rpx;
		margin: 10rpx 5rpx;
	}
</style>
